<template>
  <div class="pageWapper">
    <Header title="创建实验" />
    <div class="pageWapper_content">
      <Form @submit="onSubmit">
        <CellGroup inset>
          <Field
            v-model="incominglineId"
            readonly
            name="incominglineId"
            label="设备ID"
            placeholder="——"
          />
          <Field
            v-model="deviceList1"
            readonly
            name="deviceList1"
            label="出线设备ID1"
            placeholder="——"
          />
          <Field
            v-model="deviceList2"
            readonly
            name="deviceList2"
            label="出线设备ID2"
            placeholder="——"
          />
          <Field
            v-model="deviceList3"
            readonly
            name="deviceList3"
            label="出线设备ID3"
            placeholder="——"
          />
          <Field
            v-model="createName"
            readonly
            name="createName"
            label="创建者姓名"
            placeholder="——"
          />
          <Field
            v-model="companyName"
            readonly
            name="companyName"
            label="所属供电公司"
            placeholder="——"
          />
          <Field
            v-model="stationArea"
            readonly
            name="stationArea"
            label="实验所在台区"
            placeholder="——"
          />
          <Field
            v-model="address"
            readonly
            name="address"
            label="地址"
            placeholder="——"
          />
          <Field
            v-model="installationPointLocation"
            readonly
            name="installationPointLocation"
            label="安装点位置"
            placeholder="——"
          />
          <Field
            v-model="incomingline"
            readonly
            name="incomingline"
            label="进线"
            placeholder="——"
          />
          <Field
            is-link
            readonly
            type="detailList"
            name="关联电表"
            label="关联电表"
            placeholder="查看详情"
            @click="goConnectPageList"
          />
        </CellGroup>
        <div class="bottomBtn">
          <Button round @click="goBack" style="width: 130px"> 返回 </Button>
          <Button
            round
            type="primary"
            style="width: 130px"
            native-type="submit"
          >
            确认创建
          </Button>
        </div>
      </Form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Header from "@/components/Header.vue"
import { ref } from "vue"
import { useRouter } from "vue-router"
import { Form, Field, CellGroup, Button } from "vant"
import { useCreateExperiment } from "@/hooks/useCreateExperiment"
import { getSession } from "@/util/tools"
import { creatTest } from "@/api/index"

const { createExperimentData } = useCreateExperiment()

const incominglineId = ref("")
const deviceList1 = ref("")
const deviceList2 = ref("")
const deviceList3 = ref("")
const createName = ref("")
const createId = ref("")
const companyName = ref("")
const stationArea = ref("")
const address = ref("")
const installationPointLocation = ref("")
const incomingline = ref("")
const detailList = ref("")

onMounted(() => {
  console.log("数据", createExperimentData.value)
  const userInfo = getSession("userInfo")
  incominglineId.value = createExperimentData.value.serviceId
  deviceList1.value = createExperimentData.value.deviceList1
  deviceList2.value = createExperimentData.value.deviceList2
  deviceList3.value = createExperimentData.value.deviceList3
  createName.value = userInfo?.username
  createId.value = userInfo?.userId
  companyName.value = createExperimentData.value.companyName
  stationArea.value = createExperimentData.value.taiQu
  address.value = createExperimentData.value.address
  incomingline.value = createExperimentData.value.incomingline
  detailList.value = createExperimentData.value.electricityMeter
  installationPointLocation.value = createExperimentData.value.position
})

const showPicker = ref(false)

const $router = useRouter()
const onSubmit = async (values) => {
  const list = []
  if (deviceList1.value) {
    list.push(deviceList1.value)
  }
  if (deviceList2.value) {
    list.push(deviceList2.value)
  }
  if (deviceList3.value) {
    list.push(deviceList3.value)
  }
  const data = {
    incominglineId: incominglineId.value,
    deviceList: list,
    createName: createName.value,
    createId: createId.value,
    companyName: companyName.value,
    stationArea: stationArea.value,
    address: address.value,
    installationPointLocation: installationPointLocation.value,
    incomingline: incomingline.value,
    detailList: detailList.value
  }
  const res = await creatTest(data)
  if (res) {
    console.log("res", res)
  }
  // $router.push({
  //   path: "/createExperiment/electricMeterBox"
  // })
}

const goConnectPageList = () => {
  $router.push({
    path: "/createExperiment/connectList"
  })
}

const goBack = () => {
  $router.back()
}
</script>
<style scoped lang="less">
@import "./index.less";
</style>
